<template>
	<div style="padding:0 20px;" class='conts'>
		<view class="titles">
			<text style="font-weight: 800;font-size: 14px;color: black;">{{data.campany}}</text>
			<van-image
			  round
			  width="30px"
			  height="30px"
			  :src="data.author?.avatar ? data.author.avatar?.replace(/public/, baseURL):''" />
			<text style="margin-left: 5px;">{{data.author?.username}}</text>
		</view>
		<view class="times">
			 面试时间: <span>{{dates(data.time)}}</span>
		</view>
		<view class="dizhi">
			面试地址: {{data.address}}
		</view>
		<view class="levels">
			 面试难度: <span>{{ LevelTypes[0][data.level[0] - 1]?.label}}</span>
		</view>
		<view class="hots">
			 当前热度: <span>{{data.hot}}</span>
		</view>
		<!-- 标签 -->
		<view class="tages">
			<van-tag type="primary" :key="it.label" v-for="it,index in data.tags" style="margin-right:3px">{{it.label}}</van-tag>
		</view>
		<!-- 图片 -->
		<view class="cont-imgs">
			<van-image   :key="index" width="5rem" height="5rem" :src="item.imgSrc? item.imgSrc.replace(/public/, baseURL):(item as string).replace(/public/, baseURL)" v-for="item,index in data.imgs"/>
		</view>
		<!-- 音频 -->
		<view class="audios">
			<audio v-if='data.audioSrc' controls name="面试录音" :author="data.author?.username" class='mt10' style="maxWidth: 280px" :src="data.audioSrc?.replace(/public/, baseURL)" ></audio>
		</view>
		<!-- 操作 -->
		<view class="caozuo">
			<view class="">
				<van-icon name="good-job-o" />
				{{data.likes}}
			</view>
			<view class="">
				<van-icon name="like-o" />
				{{data.collects}}
			</view>
			<view class="">
				<van-icon name="comment-o" />
				{{data.pings}}
			</view>
		</view>
	</div>
</template>

<script setup lang="ts">
import {dates} from '@/ulit/date'
import {onLoad} from '@dcloudio/uni-app'
import {ref} from 'vue'
import {baseURL} from '@/ulit/baseURL'
import { getmsbyid } from '../../api/api';
const data = ref<addmsType>({} as addmsType)

const LevelTypes = [
		[{
				label: '简单',
				value: 1
			},
			{
				label: '复杂',
				value: 2
			},
			{
				label: '困难',
				value: 3
			},
			{
				label: '地狱',
				value: 4
			},
			{
				label: '无解',
				value: 5
			},
		]
	]
onLoad(async(options)=>{
	let res = await getmsbyid(options.id)
	data.value = res.result;
	console.log(data.value);
})

</script>

<style scoped lang="scss">
.conts{
	color:#999999;
	font-size: 12px;
	view{
		margin-top: 10px;
	}
	.audios{
		margin-left: -10px;
	}
	.cont-imgs{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.caozuo{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 12px;
	}
}
.titles{
	display: flex;
	align-items: center;
	height: 50px;
	border-bottom: 1px solid gray;
	text{
		margin: 0 10px;
	}
}
</style>